<template>
  <view class="user-profile">
    <!-- 顶部导航栏 -->
    <view class="header">
      <image class="logo" src="https://picsum.photos/40/40" mode="aspectFill" alt="logo"></image>
      <text class="title">个人中心</text>
      <view class="nav-actions">
        <button class="nav-btn" @click="goHome">
          <i class="iconfont icon-shouye"></i>
        </button>
        <button class="nav-btn" @click="goMessages">
          <i class="iconfont icon-xiaoxi"></i>
          <view class="badge">3</view>
        </button>
      </view>
    </view>

    <!-- 头部区域：头像 + 用户名 + 按钮 -->
    <view class="profile-header">
      <view class="avatar-wrapper">
        <image 
          class="avatar" 
          :src="avatarUrl" 
          mode="aspectFill"
          alt="用户头像"
        ></image>
        <button class="edit-avatar">
          <i class="iconfont icon-bianji"></i>
        </button>
      </view>
      <view class="user-info">
        <text class="username">{{ userInfo.username }}</text>
        <text class="user-desc">高级会员 · 注册于 {{ joinTime }}</text>
        <view class="btn-group">
          <button class="btn" @click="handleModifyPassword">
            <i class="iconfont icon-mima"></i>
            <text>修改密码</text>
          </button>
          <button class="btn danger-btn" @click="handleLogout">
            <i class="iconfont icon-tuichu"></i>
            <text @click="NoLog">退出登录</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content-container">
      <!-- 左侧信息区 -->
      <view class="left-panel">
        <!-- 个人资料卡片 -->
        <view class="card">
          <text class="card-title">个人资料</text>
          <view class="info-item">
            <i class="iconfont icon-youxiang"></i>
            <text><strong>邮箱：</strong>{{ email }}</text>
          </view>
          <view class="info-item">
            <i class="iconfont icon-shouji"></i>
            <text><strong>手机：</strong>{{ userInfo.phone }}</text>
          </view>
          <view class="info-item">
            <i class="iconfont icon-riqi"></i>
            <text><strong>注册时间：</strong>{{ joinTime }}</text>
          </view>
          <view class="info-item">
            <i class="iconfont icon-dizhi"></i>
            <text><strong>所在地：</strong>{{ location }}</text>
          </view>
          <view class="info-item">
            <i class="iconfont icon-xingbie"></i>
            <text><strong>性别：</strong>{{ userInfo.sex }}</text>
          </view>
          <view class="info-item">
            <i class="iconfont icon-nianling"></i>
            <text><strong>年龄：</strong>{{ userInfo.age }}</text>
          </view>
        </view>

        <!-- 账户设置卡片 -->
        <view class="card">
          <text class="card-title">账户设置</text>
          <view class="setting-list">
            <view class="setting-item" @click="goToSetting('security')">
              <view class="item-content">
                <i class="iconfont icon-anquan"></i>
                <text>账号安全</text>
              </view>
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="setting-item" @click="goToSetting('privacy')">
              <view class="item-content">
                <i class="iconfont icon-yinsi"></i>
                <text>隐私设置</text>
              </view>
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="setting-item" @click="goToSetting('notification')">
              <view class="item-content">
                <i class="iconfont icon-tongzhi"></i>
                <text>通知管理</text>
              </view>
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="setting-item" @click="goToSetting('billing')">
              <view class="item-content">
                <i class="iconfont icon-zhanghu"></i>
                <text>账单管理</text>
              </view>
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="setting-item" @click="goToSetting('preferences')">
              <view class="item-content">
                <i class="iconfont icon-shezhi"></i>
                <text>偏好设置</text>
              </view>
              <i class="iconfont icon-arrow-right"></i>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧内容区 -->
      <view class="right-panel">
        <!-- 关于更多板块 -->
        <view class="card about-more">
          <text class="card-title">关于更多</text>
          <view class="more-func-list">
            <view 
              class="func-item" 
              v-for="(item, index) in moreFuncList" 
              :key="index"
              @click="handleFuncItemClick(item)"
            >
              <view class="icon-wrapper">
                <i :class="item.icon"></i>
              </view>
              <text>{{ item.text }}</text>
            </view>
          </view>
        </view>

        <!-- 数据统计卡片 -->
        <view class="card stats-card">
          <text class="card-title">数据统计</text>
          <view class="stats-grid">
            <view class="stat-item">
              <view class="stat-icon">
                <i class="iconfont icon-fabu"></i>
              </view>
              <text class="stat-num">24</text>
              <text class="stat-desc">发布内容</text>
            </view>
            <view class="stat-item">
              <view class="stat-icon">
                <i class="iconfont icon-fensi"></i>
              </view>
              <text class="stat-num">128</text>
              <text class="stat-desc">粉丝</text>
            </view>
            <view class="stat-item">
              <view class="stat-icon">
                <i class="iconfont icon-guanzhu"></i>
              </view>
              <text class="stat-num">42</text>
              <text class="stat-desc">关注</text>
            </view>
            <view class="stat-item">
              <view class="stat-icon">
                <i class="iconfont icon-dianzan"></i>
              </view>
              <text class="stat-num">368</text>
              <text class="stat-desc">获赞</text>
            </view>
          </view>
        </view>

        <!-- 动态/文章卡片 -->
     
      </view>
    </view>

    <!-- 遮罩层和修改密码弹窗 -->
    <view v-if="isPasswordModalVisible" @click="handleMaskClick($event)" class="mask">
      <view class="password-modal">
        <input @click.stop type="text" v-model="oldPassword" class="newPass" placeholder="请输入旧密码">
        <input @click.stop type="text" v-model="newPassword" class="newPass" placeholder="请输入新密码">
        <button @click.stop="confirmModifyPassword">确认修改</button>
      </view>
    </view>
  </view>
</template>

<script>
  import { userUpdatePass } from '@/api/login.js';
export default {
  name: 'UserProfile',
  data() {
    return {
      // 默认用户头像
      avatarUrl: 'https://picsum.photos/200/200?random=1', 
      username: '张三',
      email: 'zhangsan@example.com',
      phone: '138****5678',
      joinTime: '2020-05-01',
      location: '北京市海淀区',
      gender: '男',
      age: '28',
      userInfo: {},
      moreFuncList: [
        {
          icon: 'iconfont icon-fenxiang', // 分享小程序
          text: '分享小程序',
          action: 'shareMiniProgram'
        },
        {
          icon: 'iconfont icon-xiaoxi', // 联系客服
          text: '联系客服',
          action: 'contactService'
        },
        {
          icon: 'iconfont icon-guanyu', // 关于我们
          text: '关于我们',
          action: 'aboutUs'
        },
        {
          icon: 'iconfont icon-ai240', // 退出登录
          text: '退出登录',
          action: 'logout'
        }
      ],
      dynamics: [
        {
          text: '分享了一篇技术文章：《uni-app 响应式布局最佳实践》',
          time: '1小时前',
          comment: '3',
          like: '12',
          image: 'https://picsum.photos/300/200?random=1'
        },
        {
          text: '发布了新作品：个人中心界面设计优化版，欢迎查看～',
          time: '昨天',
          comment: '5',
          like: '24',
          image: 'https://picsum.photos/300/200?random=2'
        },
        {
          text: '参加了线上技术沙龙，收获满满！',
          time: '3天前',
          comment: '1',
          like: '8',
          image: ''
        },
        {
          text: '更新了个人简介，欢迎了解我的最新动态。',
          time: '上周',
          comment: '0',
          like: '5',
          image: ''
        },
        {
          text: '完成了新的学习课程，获得了证书。',
          time: '2周前',
          comment: '2',
          like: '10',
          image: 'https://picsum.photos/300/200?random=3'
        }
      ],
      isDynamicsExpanded: false, // 动态内容是否展开
      isPasswordModalVisible: false, // 控制修改密码弹窗的显示与隐藏
      newPassword: '', // 存储用户输入的新密码
      oldPassword:''
    }
  },
  mounted() {
    let userInfoa = uni.getStorageSync('userInfo');
    console.log(userInfoa);
    this.userInfo = userInfoa;
  },
  methods: {
    handleMaskClick(event) {
      this.isPasswordModalVisible = false;
    },
    handleModifyPassword() {
      this.isPasswordModalVisible = true;
    },

    //改密码
    confirmModifyPassword() {
      let data={
        newPassword:this.newPassword,
        oldPassword:this.oldPassword
      };
      userUpdatePass(data).then((data)=>{
        if (data.code === 200) {
          uni.showToast({
            title: '密码修改成功',
            icon: 'none'
          });
          this.isPasswordModalVisible = false;
          this.newPassword = '' // 清空输入框
        }else{
          uni.showToast({
            title: '密码修改失败',
            icon: 'none'
          })
        }
      });
    },
    handleLogout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('userInfo');
            uni.navigateTo({
              url:'/pages/login/login'
            })
          }
        }
      });
    },
    handleFuncItemClick(item) {
      switch (item.action) {
        case 'shareMiniProgram':
          uni.showToast({
            title: '分享功能已触发',
            icon: 'none'
          });
          break;
        case 'contactService':
          uni.showModal({
            title: '联系客服',
            content: '请拨打客服电话：400-123-4567',
            showCancel: false
          });
          break;
        case 'aboutUs':
          uni.navigateTo({ url: '/pages/about/about' });
          break;
        case 'logout':
          this.handleLogout();
          break;
        default:
          break;
      }
    },
    goToSetting(type) {
      let url = '';
      switch (type) {
        case 'security': url = '/pages/security/security'; break;
        case 'privacy': url = '/pages/privacy/privacy'; break;
        case 'notification': url = '/pages/notification/notification'; break;
        case 'billing': url = '/pages/billing/billing'; break;
        case 'preferences': url = '/pages/preferences/preferences'; break;
        default: break;
      }
      if (url) uni.navigateTo({ url });
    },
    loadMore() {
      uni.showToast({
        title: '加载更多内容',
        icon: 'loading'
      });
      // 模拟加载更多数据
      setTimeout(() => {
        uni.showToast({
          title: '已加载全部内容',
          icon: 'none'
        });
      }, 1500);
    },
    goHome() {
      uni.navigateTo({ url: '/pages/home/home' });
    },
    goMessages() {
      uni.navigateTo({ url: '/pages/messages/messages' });
    },
    toggleDynamics() {
      this.isDynamicsExpanded = !this.isDynamicsExpanded;
      // 添加展开/收起动画效果
      const dynamicList = uni.createSelectorQuery().select('.dynamic-list');
      if (this.isDynamicsExpanded) {
        dynamicList.animation({
          duration: 300,
          timingFunction: 'ease-out'
        }).step();
      } else {
        dynamicList.animation({
          duration: 300,
          timingFunction: 'ease-in'
        }).step();
      }
    }
  }
}
</script>

<style scoped>
/* 引入 iconfont CSS */
@import url('@/static/icon.css');

/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

page {
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.user-profile {
  padding: 20rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  position: relative;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.logo {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 28rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-actions {
  display: flex;
  gap: 16rpx;
}

.nav-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #666;
  transition: all 0.2s;
}

.nav-btn:hover {
  background-color: #e9ecf2;
  color: #409eff;
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #f56c6c;
  color: #fff;
  font-size: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头部区域布局 */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 40rpx;
  background: linear-gradient(135deg, #409eff 0%, #52c41a 100%);
  color: #fff;
}

.avatar-wrapper {
  position: relative;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
}

.edit-avatar {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #409eff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.edit-avatar:hover {
  background-color: #fff;
  transform: scale(1.1);
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.username {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.user-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24rpx;
}

.btn-group {
  display: flex;
  gap: 24rpx;
}

/* 按钮样式 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 18rpx 36rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.btn text {
  line-height: 1;
}

.btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: #409eff;
}

.btn:hover {
  background-color: #fff;
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}

.danger-btn {
  background-color: rgba(245, 108, 108, 0.9);
  color: #fff;
}

.danger-btn:hover {
  background-color: #f56c6c;
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(245, 108, 108, 0.2);
}

/* 内容容器 - 两栏布局 */
.content-container {
  display: flex;
  gap: 30rpx;
  max-width: 100%; /* 取消最大宽度限制，自适应屏幕 */
  margin: 0 auto;
}

/* 左侧面板 */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

/* 右侧面板 */
.right-panel {
  flex: 1.5; /* 右侧面板更宽 */
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

/* 卡片通用样式 */
.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rpx;
  background-color: #409eff;
  border-radius: 16rpx 16rpx 0 0;
}

.card:hover {
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  transform: translateY(-4rpx);
}

.card-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 28rpx;
  position: relative;
  padding-bottom: 16rpx;
}

.card-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48rpx;
  height: 4rpx;
  background-color: #ffffff;
  border-radius: 2rpx;
}

/* 信息项样式 */
.info-item {
  display: flex;
  align-items: center;
  gap: 18rpx;
  margin-bottom: 24rpx;
  font-size: 30rpx;
  color: #666;
}

.info-item i {
  color: #409eff;
  font-size: 32rpx;
}

.info-item strong {
  color: #333;
  margin-right: 10rpx;
}

/* 设置列表样式 */
.setting-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f2f5;
  font-size: 30rpx;
  color: #666;
  transition: all 0.2s;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:hover {
  color: #409eff;
  transform: translateX(4rpx);
}

.item-content {
  display: flex;
  align-items: center;
  gap: 18rpx;
}

.item-content i {
  color: #409eff;
  font-size: 32rpx;
}

/* 动态列表 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  background: none;
  border: none;
  color: #409eff;
  font-size: 28rpx;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn:hover {
  color: #3a8ee6;
  transform: translateY(-2rpx);
}

.more-btn {
  font-size: 26rpx;
  color: #409eff;
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 24rpx;
  width: 100%;
  justify-content: center;
}

.more-btn:hover {
  color: #3a8ee6;
  transform: translateY(-2rpx);
}

.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  transition: all 0.3s ease-in-out;
}

.dynamic-item {
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid #f0f2f5;
  transition: all 0.2s;
}

.dynamic-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.dynamic-item:hover {
  transform: translateX(6rpx);
}

.dynamic-content {
  margin-bottom: 20rpx;
}

.dynamic-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.dynamic-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.dynamic-time {
  font-size: 26rpx;
  color: #999;
}

.dynamic-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-size: 26rpx;
  color: #999;
}

.action-count {
  margin-left: 6rpx;
}

.dynamic-image {
  width: 100%;
  height: 300rpx; /* 调整图片高度，避免内容过长 */
  border-radius: 16rpx;
  margin-top: 20rpx;
  object-fit: cover;
  transition: all 0.3s;
}

.dynamic-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

/* 数据统计卡片 */
.stats-card {
  padding: 36rpx 0;
}

.stats-card .card-title {
  padding-left: 36rpx;
  padding-right: 36rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 电脑端4列统计 */
  gap: 24rpx;
  padding: 0 36rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  border-radius: 12rpx;
  background-color: #f8f9fa;
  transition: all 0.2s;
  text-align: center;
}

.stat-item:hover {
  background-color: #e9ecf2;
  transform: translateY(-4rpx);
}

.stat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  color: #409eff;
  font-size: 40rpx;
}

.stat-num {
  font-size: 44rpx;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8rpx;
}

.stat-desc {
  font-size: 28rpx;
  color: #666;
}

/* 关于更多板块 */
.about-more .more-func-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 电脑端4列功能项 */
  gap: 24rpx;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: #f8f9fa;
  transition: all 0.2s;
  border: 1rpx solid #f0f2f5;
  text-align: center;
}

.func-item:hover {
  background-color: #e9ecf2;
  transform: translateY(-8rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
  border-color: #d9dde1;
}

.icon-wrapper {
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  border-radius: 50%;
  color: #409eff;
  transition: all 0.3s;
}

.icon-wrapper i {
  font-size: 36rpx;
}

.icon-fenxiang ~ .icon-wrapper { background-color: #e6f7ff; color: #409eff; }
.icon-xiaoxi ~ .icon-wrapper { background-color: #f0fff4; color: #52c41a; }
.icon-guanyu ~ .icon-wrapper { background-color: #ebf5ff; color: #1890ff; }
.icon-ai240 ~ .icon-wrapper { background-color: #ffefef; color: #f5222d; }

.func-item:hover .icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
}

.func-item text {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  font-weight: 500;
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .content-container {
    flex-direction: column;
  }
  
  .left-panel, .right-panel {
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-more .more-func-list {
    grid-template-columns: repeat(4, 1fr); /* 移动端4列功能项，占一排 */
  }
  
  .func-item {
    padding: 16rpx;
  }
  
  .icon-wrapper {
    width: 50rpx;
    height: 50rpx;
  }
  
  .icon-wrapper i {
    font-size: 28rpx;
  }
  
  .func-item text {
    font-size: 22rpx;
  }
}

@media screen and (max-width: 768px) {
  .profile-header {
    padding: 32rpx;
  }
  
  .card {
    padding: 32rpx;
  }
  
  .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .btn {
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .about-more .more-func-list {
    grid-template-columns: repeat(4, 1fr); /* 移动端4列功能项，占一排 */
  }
  
  .func-item {
    padding: 12rpx;
  }
  
  .icon-wrapper {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
  }
  
  .icon-wrapper i {
    font-size: 24rpx;
  }
  
  .func-item text {
    font-size: 18rpx;
  }
  
  .dynamic-image {
    height: 240rpx;
  }
}

/* 底部安全区域 */
page {
  padding-bottom: 40rpx;
}

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 修改密码弹窗样式 */
.password-modal {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 36rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.password-modal input {
  width: 120px;
  height: 40px;
  padding: 18rpx;
  border: 1rpx solid #f0f2f5;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.password-modal button {
  padding: 18rpx 36rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  transition: all 0.2s;
}

.password-modal button:hover {
  background-color: #3a8ee6;
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
}
</style>